<template>
  <div class="goods-basic-info">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span class="form-title">基础资料</span>
          <div class="header-actions">
            <el-button>取消</el-button>
            <el-button type="primary" @click="saveGoods" :loading="saving">保存</el-button>
          </div>
        </div>
      </template>

      <el-form :model="form" label-width="120px" class="goods-form">

        <!-- ========== 基本信息 ========== -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品名称" required>
                <el-input v-model="form.name" placeholder="请输入商品名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号">
                <el-input v-model="form.specification" placeholder="请输入规格型号" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品图片">
                <el-upload v-model:file-list="fileList" class="upload-demo" :auto-upload="false"
                  :on-preview="handlePreview" :limit="1" :on-exceed="handleExceed" :on-change="handleChange"
                  accept="image/jpeg,image/jpg,image/png">
                  <el-button type="primary">图片上传</el-button>
                  <template #tip>
                    <div class="el-upload__tip">
                      jpg/png files with a size less than 10MB.
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="首选仓库">
                <el-select v-model="form.warehouse" placeholder="首选仓库" clearable style="width: 100%">
                  <el-option v-for="item in warehouseData" :key="item.id" :label="item.name" :value="item.id">
                    <span>{{ item.name }}</span>
                  </el-option>

                  <template #footer>
                    <el-button size="small" @click="openAddWarehouseDialog">
                      添加仓库
                    </el-button>
                  </template>
                </el-select>
                <add-warehouse-dialog ref="warehouseDialogRef" @success="getWarehouseData" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="商品类别">
                <el-tree-select v-model="form.type" :data="treeSelectData" filterable placeholder="请选择商品类别" clearable
                  style="width: 100%" :props="{ value: 'id', label: 'name', children: 'children' }"
                  :check-strictly="true">
                  <template #default="{ data }">
                    <span>
                      <el-icon>
                        <Folder v-if="data.children && data.children.length > 0" />
                        <Document v-else />
                      </el-icon>
                      {{ data.name }}
                    </span>
                  </template>
                </el-tree-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计量单位">
                <el-select v-model="form.unit" placeholder="请选择单位" clearable style="width: 100%">
                  <!-- 普通单位 -->
                  <template v-if="form.unitType == '0'">
                    <el-option v-for="item in singUnitData" :key="item.id" :label="item.name" :value="item.id" />
                  </template>

                  <!-- 多单位组合 -->
                  <template v-else>
                    <el-option v-for="item in multipleUnitData" :key="item.id" :label="item.name" :value="item.id" />
                  </template>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4" style="display: flex; align-items: center; justify-content: flex-end;">
              <el-checkbox v-model="form.unitType" true-value="1" false-value="0">
                多单位
              </el-checkbox>
            </el-col>
          </el-row>

          <!-- 多单位相关字段 -->
          <div v-if="form.unitType == '1'" style="margin-top: 16px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="首选入库单位">
                  <el-select v-model="form.preferredInUnit" placeholder="请选择首选入库单位" clearable style="width: 100%">
                    <el-option label="盒" value="盒" />
                    <el-option label="包" value="包" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="首选出库单位">
                  <el-select v-model="form.preferredOutUnit" placeholder="请选择首选出库单位" clearable style="width: 100%">
                    <el-option label="盒" value="盒" />
                    <el-option label="包" value="包" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="默认供应商">
                <el-select v-model="form.defaultSupplier" placeholder="请选择默认供应商" clearable style="width: 100%">
                  <el-option v-for="item in supplierData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌">
                <el-select v-model="form.brand" placeholder="品牌" clearable style="width: 100%">
                  <el-option v-for="item in brandData" :key="item.id" :label="item.name" :value="item.id">
                    <span>{{ item.name }}</span>
                  </el-option>

                  <template #footer>
                    <el-button size="small" @click="openAddBrandDialog">
                      添加品牌
                    </el-button>
                  </template>
                </el-select>
                <add-brand-dialog ref="brandDialogRef" @success="getBrandData" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="最低销售价">
                <el-input-number v-model="form.salePrice" :min="0" :precision="2" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计采购价">
                <el-input-number v-model="form.predictPrice" :min="0" :precision="2" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最高采购价">
                <el-input-number v-model="form.purchasePrice" :min="0" :precision="2" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-form-item label="库存管理方式">
              <div style="display: flex; gap: 20px; align-items: center;">
                <!-- 启用批次管理 -->
                <el-checkbox :model-value="form.managerType == '1'"
                  @update:model-value="val => handleCheckboxChange(val, '1')">
                  启用批次保质期管理
                </el-checkbox>

                <!-- 启用序列号管理 -->
                <el-checkbox :model-value="form.managerType == '2'"
                  @update:model-value="val => handleCheckboxChange(val, '2')">
                  启用序列号管理
                </el-checkbox>
              </div>

              <!-- 保质期相关输入框：仅在批次管理启用时显示 -->
              <div v-if="form.managerType == '1'"
                style="margin-top: 10px; display: flex; gap: 10px; align-items: center;">
                <el-form-item label="保质期天数">
                  <el-input-number v-model="form.expiryDays" :min="0" :max="9999" :precision="0"
                    controls-position="right" style="width: 100%" />
                </el-form-item>

                <el-form-item label="保警天数">
                  <el-input-number v-model="form.alertDays" :min="0" :max="9999" :precision="0"
                    controls-position="right" style="width: 100%" />
                </el-form-item>

              </div>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="期初设置">
              <el-checkbox v-model="form.init" :true-value="1" :false-value="0">
                期初设置
              </el-checkbox>
            </el-form-item>
          </el-row>

          <!-- 期初库存表格 -->
          <div v-if="form.init" class="form-section" style="border-top: 1px dashed #dcdfe6; padding-top: 20px;">

            <el-table :data="initStockList" border>
              <el-table-column type="index" width="50" />
              <el-table-column width="80">
                <template #default="{ $index }">
                  <el-button @click="addInitRow($index)" link size="small" icon="Plus" />

                  <el-button @click="removeInitRow($index)" link size="small" icon="Delete" />
                </template>
              </el-table-column>
              <el-table-column label="仓库">
                <template #default="{ row }">
                  <el-select v-model="row.warehouseId" placeholder="请选择仓库" style="width: 100%"
                    @change="() => handleWarehouseSelect(row)">
                    <el-option v-for="item in warehouseData" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="期初数量">
                <template #default="{ row }">
                  <el-input-number v-model="row.quantity" :min="0" controls-position="right" style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column label="单价成本">
                <template #default="{ row }">
                  <el-input-number v-model="row.cost" :min="0" :precision="2" controls-position="right"
                    style="width: 100%" />
                </template>
              </el-table-column>

              <el-table-column label="期初总价">
                <template #default="{ row }">
                  {{ computeTotal(row) }}
                </template>
              </el-table-column>
            </el-table>


          </div>
        </div>

        <!-- ========== 价格策略 ========== -->
        <div class="form-section">
          <div class="section-title">
            价格策略
            <el-button type="text" style="margin-left: 10px; font-size: 12px;">
              如需要设置更多的商品价格，请前往：客户等级
            </el-button>
          </div>

          <el-row :gutter="20">
            <el-col v-for="level in customerLevels" :key="level.id" :span="8">
              <el-form-item :label="level.tactics">
                <el-input-number v-model="prices[level.id]" :min="0" :precision="2" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 开票信息 -->
        <div class="form-section">
          <div class="section-title">开票信息</div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品税率(%)">
                <el-input-number v-model="form.taxRate" :min="0" :max="100" :precision="2" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税收入分类编码">
                <el-input v-model="form.taxCode" placeholder="请输入税收入分类编码" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否免税">
                <el-select v-model="form.dutyFree" clearable style="width: 100%">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品开票名称">
                <el-input v-model="form.invoiceName" placeholder="请输入商品开票名称" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import AddWarehouseDialog from '@/util/AddWarehouseDialog.vue'
import AddBrandDialog from '@/util/AddBrandDialog.vue'
// import { UploadFilled } from '@element-plus/icons-vue'

import { useRouter, useRoute } from 'vue-router'
import imgStr from '@/store/imgStr'


const route = useRoute();

const router = useRouter()

// 判断是新增还是编辑
const isEditMode = computed(() => !!route.query.id);
const currentId = route.query.id;

// 保存按钮状态
const saving = ref(false)

// 文件上传
const fileList = ref([])

const customerLevelsLoaded = ref(false)

// 仓库添加对话框
const warehouseDialogRef = ref()
// 打开仓库添加对话框
const openAddWarehouseDialog = () => {
  warehouseDialogRef.value.openAddDialog()
}

// 品牌添加对话框
const brandDialogRef = ref()
// 打开品牌添加对话框
const openAddBrandDialog = () => {
  brandDialogRef.value.openAddDialog()
}

// 表单数据（与数据库字段对应）
const form = reactive({
  // 基础信息
  name: '',
  type: '',   // 商品类别（int）
  specification: '', // 规格
  brand: '', // 品牌
  unit: '', // 基本单位
  unitType: 0, // 单单位类型
  warehouse: '', // 存放仓库
  predictPrice: 0, // 预计采购价
  purchasePrice: 0, // 最高采购价
  salePrice: 0, // 最低销售价
  remark: '', // 备注
  defaultSupplier: '', // 供应商id
  managerType: 0, // 管理方式：1：批次管理 2：序列号 0：普通 
  expiryDays: 0,       // 保质期天数
  alertDays: 0,
  initQuantity: 0, // 期初数量
  initPrice: 0, // 期初总价
  cost: 0, // 单价成本
  init: 0,

  // 发票信息
  taxRate: 0,
  taxCode: '',
  dutyFree: 0,
  invoiceName: '',
})

// 期初表格（）
const initStockList = ref([
  { warehouseId: '', quantity: 0, cost: 0 }
])

const computeTotal = (row) => {
  const quantity = parseFloat(row.quantity) || 0
  const cost = parseFloat(row.cost) || 0
  return parseFloat((quantity * cost).toFixed(2))
}

watch(initStockList, (newList) => {
  if (!form.init) {
    form.initQuantity = 0
    form.initPrice = 0
    form.cost = 0
    return
  }

  let totalQuantity = 0
  let totalPrice = 0

  for (const row of newList) {
    const quantity = parseFloat(row.quantity) || 0
    const cost = parseFloat(row.cost) || 0
    totalQuantity += quantity
    totalPrice += quantity * cost
  }

  form.initQuantity = parseFloat(totalQuantity.toFixed(4))
  form.initPrice = parseFloat(totalPrice.toFixed(2))

  form.cost = totalQuantity > 0 ? parseFloat((totalPrice / totalQuantity).toFixed(3)) : 0
}, { deep: true, immediate: true })

const addInitRow = () => {
  initStockList.value.push({ warehouseId: '', quantity: 0, cost: 0 })
}

const removeInitRow = (index) => {
  if (initStockList.value.length > 1) {
    initStockList.value.splice(index, 1)
  } else {
    form.init = 0
    initStockList.value[0] = { warehouseId: '', quantity: 0, cost: 0 }
  }
}

const handleWarehouseSelect = (row) => {
  const newWarehouseId = row.warehouseId
  if (!newWarehouseId) return

  // 检查其他行是否已经选了这个仓库（排除自己）
  const isCheck = initStockList.value.some(item => item !== row && item.warehouseId === newWarehouseId)

  if (isCheck) {
    ElMessage.warning('该仓库已设置期初库存，请勿重复选择')
    row.warehouseId = '' // 清空当前行
  }
}

// 客户等级
const customerLevels = ref([])

const prices = ref({})

const getCustomerLevel = async () => {
  try {
    const res = await axios.get('/api/basic/customer/customerLevels')
    if (res.data.code === 5200) {
      customerLevels.value = res.data.customerLevels
      const initialPrices = {}
      customerLevels.value.forEach(level => {
        initialPrices[level.id] = 0 // 初始价格为 0
      })
      prices.value = initialPrices
      customerLevelsLoaded.value = true
    } else {
      ElMessage.error('获取客户等级列表失败')
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// ==== 商品类别 ====
const goodsType = ref([])

const getGoodsType = async () => {

  const params = { status: 1 }

  try {
    const res = await axios.get('/api/basic/goods/allGoodsType', { params })

    if (res.data.code === 5200) {
      goodsType.value = res.data.goodsTypeList
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const treeData = computed(() => {
  const roots = []
  const map = {}
  goodsType.value.forEach(item => {
    map[item.id] = { ...item, children: [] }
  })

  goodsType.value.forEach(item => {
    if (item.parentId === null || item.parentId === '0') {
      roots.push(map[item.id])
    } else {
      const parentObj = map[item.parentId]
      if (parentObj) {
        parentObj.children.push(map[item.id])
      }
    }
  })
  return roots
})

const treeSelectData = computed(() => {
  const enabledTreeData = treeData.value
  return [
    {
      id: '0',
      name: '全部',
      children: enabledTreeData
    }
  ]
})

// ===== 仓库 =====
const warehouseData = ref([])

const getWarehouseData = async () => {
  try {
    const res = await axios.get('/api/basic/warehouse/allWarehouses')

    if (res.data.code === 5200) {
      warehouseData.value = res.data.warehouseList
    } else {
      ElMessage.error(res.data.message)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// ===== 品牌 =====
const brandData = ref([])

const getBrandData = async () => {
  try {
    const res = await axios.get('/api/basic/goods/allBrand')

    if (res.data.code === 5200) {
      brandData.value = res.data.brandList
    } else {
      ElMessage.error(res.data.message)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// ===== 供应商 =====
const supplierData = ref([])

const getsupplierData = async () => {
  try {
    const res = await axios.get('/api/basic/supplier/allSupplier')

    if (res.data.code === 5200) {
      supplierData.value = res.data.supplierList
    } else {
      ElMessage.error(res.data.message)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// ===== 基本单位 =====
const singUnitData = ref([])

const getSingUnitData = async () => {
  try {
    const res = await axios.get('/api/basic/goods/allSingleUnit')

    if (res.data.code === 5200) {
      singUnitData.value = res.data.singleUnitList
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// ===== 多单位 =====
const multipleUnitData = ref([])

const getMultipleUnitData = async () => {
  try {
    const res = await axios.get('/api/basic/goods/allMultipleUnit')

    if (res.data.code === 5200) {
      multipleUnitData.value = res.data.multipleUnitList
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error(error.message)
  }
}


// 文件上传事件
const handleExceed = () => {
  ElMessage.warning('最多只能上传 1 张图片')
}

const handleChange = (uploadFile, uploadFiles) => {
  const file = uploadFile.raw || uploadFile
  const imgSuffix = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
  const imgSize = file.size / 1024 / 1024 < 10;
  if (!imgSuffix || !imgSize) {
    ElMessage.error('上传图片只能是 jpg/png 格式，大小不能超过10MB！')
    fileList.value = uploadFiles.filter(f => f.uid !== uploadFile.uid)
    return
  }
}

const handlePreview = (file) => {
  // 如果有 url（比如回显时），可以用 window.open 或 dialog 展示
  if (file.url) {
    window.open(file.url)
  } else if (file.raw) {
    const url = URL.createObjectURL(file.raw)
    window.open(url)
    URL.revokeObjectURL(url) // 释放内存
  }
}


// 加载商品详情（如果是编辑）
const loadGoodsDetail = async () => {
  if (!isEditMode.value) return;

  try {
    const res = await axios.get(`/api/basic/goods/goodsById`, {
      params: { id: currentId }
    });

    if (res.data.code === 5200) {
      const { goods, initStockList: initStocks, priceStrategyList } = res.data.goodsRequest
      // 将返回的数据赋值给 form
      Object.assign(form, goods);

      //  回显期初库存
      if (initStocks.length > 0) {
        form.init = 1; // 打开期初设置
        initStockList.value = initStocks.map(item => ({
          warehouseId: item.warehouseId || '',
          quantity: item.quantity || 0,
          cost: item.cost || 0
        }));
      } else {
        form.init = 0;
        initStockList.value = [{ warehouseId: '', quantity: 0, cost: 0 }];
      }

      //  回显价格策略
      if (!customerLevelsLoaded.value) {
        await getCustomerLevel();
      }
      const priceMap = {};
      (priceStrategyList || []).forEach(item => {
        priceMap[item.customerLevelId] = parseFloat(item.price) || 0;
      });
      prices.value = priceMap; 

      // 图片回显
      const picture = goods.picture
      if(picture){
        fileList.value = [{
          name: picture,
          url: imgStr + picture
        }]
      }

    } else {
      ElMessage.error(res.data.msg);
      router.back(); // 加载失败返回列表
    }
  } catch (error) {
    ElMessage.error('加载商品信息失败');
    router.back();
  }
};


// 保存数据
const saveGoods = async () => {
  saving.value = true

  console.log('当前 fileList:', fileList.value)
  console.log('第一个文件 raw:', fileList.value[0]?.raw)
  console.log('raw 类型:', fileList.value[0]?.raw?.constructor?.name)

  // === 查找单位名称 ===
  let unitName = ''
  if (form.unitType == '0') {
    const unitObj = singUnitData.value.find(u => u.id == form.unit)
    unitName = unitObj?.name || ''
  } else {
    const unitObj = multipleUnitData.value.find(u => u.id == form.unit)
    unitName = unitObj?.name || ''
  }

  // === 查找仓库名称 ===
  const warehouseObj = warehouseData.value.find(w => w.id == form.warehouse)
  const warehouseName = warehouseObj?.name || ''


  // 创建请求体
  const goodsRequest = {
    goods: {
      id: isEditMode.value ? currentId : '',
      name: form.name,
      type: form.type,
      specification: form.specification,
      brand: form.brand,
      unit: form.unit,
      unitType: form.unitType,
      unitName: unitName,
      warehouse: form.warehouse,
      warehouseName: warehouseName,
      initQuantity: form.initQuantity,
      initPrice: form.initPrice,
      cost: form.cost,
      predictPrice: form.predictPrice,
      purchasePrice: form.purchasePrice,
      salePrice: form.salePrice,
      remark: form.remark,
      defaultSupplier: form.defaultSupplier,
      taxRate: form.taxRate,
      taxCode: form.taxCode,
      dutyFree: form.dutyFree,
      invoiceName: form.invoiceName,
      managerType: form.managerType,
      expiryDays: form.expiryDays,
      alertDays: form.alertDays,
    },
    // 新增：期初明细列表（仅当启用期初时才传）
    initStockList: form.init ? initStockList.value.map(row => ({
      warehouseId: row.warehouseId,
      quantity: row.quantity,
      cost: row.cost
    })) : [],
    priceStrategyList: customerLevels.value.map(level => ({
      customerLevelId: level.id,
      price: prices.value[level.id]
    })),
  }

  const formData = new FormData()

  formData.append('goodsRequest', JSON.stringify(goodsRequest))

  if (fileList.value.length > 0 && fileList.value[0].raw) {
    formData.append('file', fileList.value[0].raw)
  }

  try {
    const url = isEditMode.value ? '/api/basic/goods/updateGoods' : '/api/basic/goods/addGoods'
    const res = await axios.post(url, formData)
    if (res.data.code === 5200) {
      ElMessage.success(res.data.msg)
      router.push({ name: 'goodsComponent' });
    } else {
      ElMessage.error(res.data.msg)
    }
  } catch (error) {
    ElMessage.error('创建失败: ' + (error.response?.data?.message || error.message))
  } finally {
    saving.value = false
  }
}

const handleCheckboxChange = (checked, type) => {
  if (checked) {
    // 如果当前被选中，则设置为该类型
    if (form.managerType && form.managerType !== type) {
      const currentName = form.managerType === '1' ? '批次管理' : '序列号管理'
      ElMessage.warning(`二者只能启用其一，请先关闭“${currentName}”。`)
      return
    }
    form.managerType = type
  } else {
    // 取消当前选中
    if (form.managerType === type) {
      form.managerType = ''
    }
  }

  // 清空保质期字段（如果取消批次或切换到非批次）
  if (form.managerType !== '1') {
    form.expiryDays = 0
    form.alertDays = 0
  }
}

onMounted(() => {
  getCustomerLevel()
  getGoodsType()
  getWarehouseData()
  getBrandData()
  getsupplierData()
  getSingUnitData()
  getMultipleUnitData()
  loadGoodsDetail()
})
</script>

<style scoped>
.goods-basic-info {
  padding: 20px;
  background-color: #f5f7fa;
}

.form-card {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-section {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background-color: #fafafa;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.goods-form {
  padding: 20px 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

.form-actions .el-button {
  min-width: 100px;
  margin: 0 10px;
}

/* 上传组件样式 */
.upload-demo {
  width: 100%;
}

:deep(.el-upload-dragger) {
  width: 100%;
}

/* 表格样式 */
:deep(.el-table) {
  margin-top: 10px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .goods-basic-info {
    padding: 10px;
  }

  .form-card {
    margin: 0;
  }

  .goods-form {
    padding: 10px 5px;
  }

  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
</style>